<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('动态加载选项')}`">{{ $t('动态加载选项') }}</t>
            <li>
                通过<span class="s-code">lazy</span>开启动态加载，并通过<span class="s-code">lazyload(node, resolve)</span>来设置加载数据源的方法。
                <span class="s-code">node</span>表示当前点击的节点，<span class="s-code">resolve(data)</span>是数据加载完成的回调(必须调用，且需要传入选项数据)，
            </li>
            <li>
                为了更准确的显示节点的状态，还可以对节点数据添加是否为叶子节点的标志位，标志位字段名称为<span class="s-code">"leaf"</span>，
                你可以通过<span class="s-code">optionProps.leaf</span>来修改它，若动态加载的选项数据没有添加标志位，则组件内部将会简单的以有无子节点来判断是否为叶子节点。
            </li>
        </template>
        <div style="width: 300px;color:#666;">
            <sib-item v-model="value" :props="props"></sib-item>
        </div>
        <div style="color:#666;">
            <p>v-model 绑定值：{{ value }}</p>
        </div>
    </example>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
    setup() {
        let id = 0;

        const value = ref(null);
        const props = reactive({
            type: 'cascader',
            optionProps: {
                lazy: true,
                lazyLoad(node, resolve) {
                    console.log('node', node);
                    const { level } = node;
                    setTimeout(() => {
                        const nodes = Array.from({ length: level + 1 }).map(() => ({
                            // eslint-disable-next-line no-plusplus
                            value: ++id,
                            label: `选项${id}`,
                            leaf: level >= 2,
                        }));
                        // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                        resolve(nodes);
                    }, 1000);
                },
            },
        });

        return {
            props,
            value,
            templateString: `<template>
    <sib-item v-model="value" :props="props"></sib-item>
    <p>v-model 绑定值：{{ value }}</p>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
    setup() {
        let id = 0;

        const value = ref(null);
        const props = reactive({
            type: 'cascader',
            optionProps: {
                lazy: true,
                lazyLoad(node, resolve) {
                    console.log('node', node);
                    const { level } = node;
                    setTimeout(() => {
                        const nodes = Array.from({ length: level + 1 }).map(() => ({
                            value: ++id,
                            label: \`选项\${id}\`,
                            leaf: level >= 2,
                        }));
                        // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                        resolve(nodes);
                    }, 1000);
                },
            },
        });

        return { props, value };
    },
};
<\/script>`,
        };
    },
};
</script>
